import { React, useState } from "react";
import { Layout, Button, Input } from "antd";
import { EyeInvisibleOutlined, EyeTwoTone } from "@ant-design/icons";
import "./Regist.css";
import RoundCheckBox from "./components/RoundCheckbox";
import { ApiService } from "./common/ApiService";

const { Content } = Layout;
const Regist = () => {
  const [newUser, setNewUser] = useState({
    username: "",
    password: "",
    email: "",
    ref_code: "0",
  });
  const [error, setError] = useState(null);
  const [passwordError, setPasswordError] = useState(false);
  const checkPasswordStrength = (pwd) => {
    if (!pwd) return 0;

    let strength = 0;

    // 长度检查
    if (pwd.length >= 5) strength += 1;
    //if (pwd.length >= 20) strength += 1;

    // 包含数字
    if (/\d/.test(pwd)) strength += 1;

    // 包含小写字母
    if (/[a-z]/.test(pwd)) strength += 1;

    // 包含大写字母
    if (/[A-Z]/.test(pwd)) strength += 1;

    // 包含特殊字符
    if (/[^a-zA-Z0-9]/.test(pwd)) strength += 1;

    return Math.min(strength, 5); // 最大强度为5
  };
  //创建用户
  const handleSubmit = async (e) => {
    var passStrLent = checkPasswordStrength(newUser.password);
    if(passStrLent < 5){
      setPasswordError(true);
      return;
    } else {
      setPasswordError(false);
    }
    if (newUser.username == "") {
      alert("Please enter your account");
      return;
    }
    if (newUser.email == "") {
      alert("Please enter your email");
      return;
    }
    if (newUser.password == "") {
      alert("Please enter your password");
      return;
    }
    e.preventDefault();
    try {
      console.log(newUser);
      var response = await ApiService.createUser(newUser);
      if (response.code === 0) {
        setNewUser({ username: "", password: "", email: "", ref_code: "0" });
        alert("Please login to your email to activate your account");
      } else {
        alert(response.message);
      }
    } catch (err) {
      setError(err.message);
    }
  };
  return (
    <Layout>
      <Content
        style={{
          backgroundColor: "#141E20",
          justifyContent: "center",
          padding: "50px",
          height: "100vh",
        }}
      >
        <a href="/">
          <img src="../public/images/LOGO1.svg" />
        </a>
        <div className="mainPanel">
          <div className="registPanel">
            <h3>Create your Account</h3>
            <div className="title">
              Already have an account? <a href="Login">Log In</a>
            </div>
            <div className="title1">Name</div>
            <div className="txt">
              <Input
                className="txt1"
                value={newUser.username}
                onChange={(e) =>
                  setNewUser({ ...newUser, username: e.target.value })
                }
              />
            </div>
            <div className="title2">Email Address</div>
            <div className="txt">
              <Input
                className="txt1"
                value={newUser.email}
                onChange={(e) =>
                  setNewUser({ ...newUser, email: e.target.value })
                }
              />
            </div>
            <div className="title2">
              Password
              {passwordError && <img src="../public/images/regist/exclamation 1.svg" />}
              {passwordError && <span>
                Password must be at least 10 characters,including one digit and
                one uppercase letter.
              </span>}
            </div>
            <div className="txt">
              <Input.Password
                className="txt1"
                iconRender={(visible) =>
                  visible ? (
                    <EyeTwoTone twoToneColor="#31F045" />
                  ) : (
                    <EyeInvisibleOutlined style={{ color: "#31F045" }} />
                  )
                }
                value={newUser.password}
                onChange={(e) =>
                  setNewUser({ ...newUser, password: e.target.value })
                }
              />
            </div>
            <Button
              onClick={handleSubmit}
              style={{
                border: "none",
                fontFamily: "Inter",
              }}
            >
              Sign In
            </Button>
            {/* <div className='title4'>
                          <RoundCheckBox checked={checked} onChange={()=>setChecked(!checked)} ></RoundCheckBox>
                          <div>I agree to the <a href='#'>Terms of Use</a> and haveread the <a href='#'>PrivacyPolicy</a>.</div>
                      </div> */}
          </div>
          <div>
            <img id="robot" src="../public/images/login_robot.svg" />
          </div>
        </div>
      </Content>
    </Layout>
  );
};
export default Regist;
